.box
  height: 30px
  width: 30px
  transition: all 1s
  &:hover
    width: 300px

以上的程式碼的用意是，
當你滑鼠滑過去.box時，
你會發現他會逐漸變成300px，
而不是瞬間就變成300px，
但是有用過的朋友都知道要做出具有生動性的動態效果，
這樣還是不太夠的，
如果我們要像真實物理情況，
例如做一顆球掉到地面後還會彈起來好幾下，
瀏覽者才會覺得你做的東西是生動而不是死板板的，
為了讓動畫看起來具真實感，
我們會透過transition預設的Easing funtion來去實踐，
只要設定他的時間曲線後，就可以做出自己想要的效果出來，

來源：http://easings.net/zh-tw

如同上述來源連結，
在以往我們做動畫時，
都是選擇看是用javascript與css來實踐，
但由於網頁效能的緣故，
由於javascript是跑CPU、CSS3動畫則是跑繪圖卡GPU，
所以相對來說，使用CSS來做動畫，在效能上會比javascript來好得多，
網頁設計師多少也必須學習該如何使用CSS來做動畫，
以因應各專案的特性，來衡量CSS與javascript的使用比重。
另外CSS3 transition預設只有五種時間漸變效果：
linear：平均速度
ease：很快到漸慢
ease-in：逐漸變快
ease-out：逐漸變慢
ease-in-out：快→慢→快
寫法就是後面在加漸變名稱：

transition: all 1s linear

除了預設這四種外，
你也可以用cubic-bezier()自行設定時間漸變效果，
如下程式碼：

transition: all 1s cubic-bezier(0.250, 0.250, 0.750, 0.750)　　//平均速度

當然也有人針對這個東西做了Sass framework，
叫做compass-ceaser-easing
https://github.com/jhardy/compass-ceaser-easing

同時也有demo網頁提供參考，讓您看看想要哪種的動畫效果，
http://matthewlein.com/ceaser/
再搭配Compass CSS3前綴支援，只能用如虎添翼來形容。

安裝方式如下：
1.到Github頁點選右下角的Download下載下來，將stylesheets資料夾裡面的檔案放到你的Sass資料夾。
2.再到你的Sass檔案@import ceaser-easing這個下載下來的Sass檔案。
3.最後再到Demo網站瀏覽你想要的動態效果，將名稱寫進去就可以了，譬如說我要easeInOutBack的效果就打：

@import compass
@import ceaser-easing
.box1
  height: 30px
  +transition(all 1s ceaser($easeInOutBack))  //
  &:hover
    width: 300px

產生出來的code就會變成

.box1 {
  height: 30px;
  -webkit-transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.box1:hover {
  width: 300px;
}

如果沒有你想要的動畫效果，
你也可以到demo網頁自己拉你想要的動畫效果，
確認後再把cubic-bezier()的值寫到你的Sass裡面去就ok了，
透過這樣的方式，你就可以開始思考如何將你的網頁更具動態效果，
除了移動位置、寬與高以外，甚至可以設定透明度的漸變效果呢！
如果想了解更多transition的影格效果，
也可瀏覽此文章：http://css3.bradshawenterprises.com/transitions/

於此也附上安裝compass-ceaser-easing的流程教學影片：